<template>
  <div class="ov-h container plr15">
    <div class="flex h100">
      <LeafTree
        :data="treeData"
        class="nav-tree" />
      <Main class="main pl15" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import LeafTree from '@/components/LeafTree/index.vue'
import Main from './main.vue'
import { reactive } from 'vue'
import type { ITree } from '@/types/tree'
const treeData = reactive<ITree[]>([
  {
    label: '公司',
    id: '123',
    type: '1',
    children: [
      {
        label: '站点',
        type: '2',
        children: [
          {
            label: '电站',
            type: '3',
            children: [
              {
                label: '分组',
                type: '4',
                children: [{ label: '设备', type: '5', children: [] }]
              }
            ]
          }
        ]
      }
    ]
  }
])
</script>

<style lang="scss" scoped>
$bg: #092133;
.container {
  background-color: $bg;
  height: calc(100vh - 6.9rem);
  width: 100%;
  box-sizing: border-box;
}
.nav-tree {
  width: 20rem;
  background: rgba(8, 36, 55, 0.70);
  height: 100%;
}
.main {
  flex: 1;
  background: rgba(8, 36, 55, 0.70);
  height: 100%;
}
</style>
